import React from 'react';
import {Form,Input,Button,Checkbox,message} from 'antd';
import {Link} from 'react-router-dom';
import {UserOutlined,LockOutlined} from '@ant-design/icons';
import "./index.css";
import {sendActionPost} from '../../../utils/axios';

const Login =(props)=>{

    const onFinish = async (state)=>{
        const {phone,password}=state;
        const res = await sendActionPost("/api/v1/auth/login",{phone,password});
        console.log(res);
        if(res.data.hasOwnProperty('token')){
            message.success("登录成功")
            props.history.push('/index')
        }else{
            message.warn("登录失败，请检查手机号码或密码是否正确")
        }
    }

    const onFinishFailed=(state)=>{
        console.log(state);
    }

    return(
        <div className="container">
        <div className="login_container">
        <div className="login_container_logo_container">
        <img src="https://album.contest.mrs4s.moe/static/images/Logo.png" className="logon_logo" alt="Logo" />
        <p>智能云相册</p>
        </div>
        <Form size="large" name="login" initialValues={{remember:true}} onFinish={onFinish} onFinishFailed={onFinishFailed} className="login-form">
            <Form.Item name="phone"  rules={[{ required: true, message: '手机号码不能为空' },{len:11,message:"手机号码应为11位数字"}]}>
                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="输入您的手机号码"/>
            </Form.Item>

            <Form.Item name="password"  rules={[{required:true,message:'密码不能为空'}]}>
                <Input.Password prefix={<LockOutlined className="site-form-item-icon"/>} placeholder="输入您的密码"/>
            </Form.Item>

            <Form.Item>

            <Form.Item name="checked" valuePropName="checked" noStyle>
                <Checkbox>记住密码</Checkbox>
            </Form.Item>

            <Link className="login-form-forgot" to="/Register">忘记密码？点击我</Link>
            </Form.Item>
            
            <div className="login_button_container">
            <Form.Item>
                <Button type="primary" htmlType="submit" className="login-form-button">
                    登录
                </Button>
            </Form.Item>

            <Link to="/Register">立刻注册</Link>
            </div>

        </Form>
        </div>
        </div>
    )
}

export default Login;